import { computed, reactive } from 'vue'
import { AtlasListState, QueryAtlasForm } from '../types'
import { Pagination } from '#/antd'
import { AtlasApi, fetchAtlasList } from '@/api/premium/content/atlas'
import { formatRequestPage } from '@/utils/antdOpFormatHelper'
import { useStore } from '@/store'
import { cloneDeep } from 'lodash-es'
import { FormItemOption } from '@/components/Form/types'
import {
  MaterialType,
  MaterialSecType,
} from '@/components/ItemList/MaterialList/types'

const useSearchAtlas = () => {
  const store = useStore()
  const atlasListState = reactive<AtlasListState>({
    listData: [],
    selectedRowKeys: [],
  })

  const pageInfo = reactive<Pagination>({
    pageSize: 10,
    current: 0,
    total: 0,
  })

  const initQueryForm: QueryAtlasForm = {
    type: -1,
    isShow: -1,
    name: '',
    itype: -1,
    tag: '',
    id: '',
  }

  const queryFormItems: FormItemOption<QueryAtlasForm>[] = [
    {
      formProps: {
        label: '图集ID',
        name: 'id',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入图集ID',
        },
      },
    },
    {
      formProps: {
        label: '图集名称',
        name: 'name',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入图集名称',
        },
      },
    },
    {
      formProps: {
        label: '标签',
        name: 'tag',
      },
      inputOption: {
        tag: 'a-input',
        props: {
          placeholder: '请输入标签',
        },
      },
    },
    {
      formProps: {
        label: '一级分类',
        name: 'type',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择一级分类',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: -1,
            },
          },
          {
            tag: 'a-select-option',
            content: '图片',
            props: {
              value: MaterialType.IMAGE,
            },
          },
          {
            tag: 'a-select-option',
            content: '视频',
            props: {
              value: MaterialType.VIDEO,
            },
          },
          {
            tag: 'a-select-option',
            content: '音乐',
            props: {
              value: MaterialType.MUSIC,
            },
          },
          {
            tag: 'a-select-option',
            content: '字体',
            props: {
              value: MaterialType.FONT,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '二级分类',
        name: 'itype',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择二级分类',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: -1,
            },
          },
          {
            tag: 'a-select-option',
            content: '摄影图',
            props: {
              value: MaterialSecType.PHOTOGRAPHY,
            },
          },
          {
            tag: 'a-select-option',
            content: '免扣图',
            props: {
              value: MaterialSecType.AVOID_CUTOUT,
            },
          },
          {
            tag: 'a-select-option',
            content: '设计矢量图',
            props: {
              value: MaterialSecType.VECTORGRAPH,
            },
          },
        ],
      },
    },
    {
      formProps: {
        label: '是否展示',
        name: 'isShow',
      },
      inputOption: {
        tag: 'a-select',
        props: {
          placeholder: '请选择是否展示',
        },
        children: [
          {
            tag: 'a-select-option',
            content: '全部',
            props: {
              value: -1,
            },
          },
          {
            tag: 'a-select-option',
            content: '展示',
            props: {
              value: 1,
            },
          },
          {
            tag: 'a-select-option',
            content: '隐藏',
            props: {
              value: 0,
            },
          },
        ],
      },
    },
  ]

  const queryFormState = reactive<QueryAtlasForm>(cloneDeep(initQueryForm))

  const queryFormBind = reactive({
    model: queryFormState,
  })

  const getAtlasList = async () => {
    const { data } = await fetchAtlasList({
      ...queryFormState,
      ...formatRequestPage(pageInfo),
    })
    atlasListState.listData = data.records
    pageInfo.current = data.current
    pageInfo.total = data.total
    pageInfo.pageSize = data.size
  }
  const getAtlasLoading = computed(() =>
    store.getters['global/isOpLoading'](AtlasApi.GET_ATLAS_LIST)
  )

  const pageChange = async (page: number) => {
    pageInfo.current = page
    await getAtlasList()
  }
  const pageSizeChange = async (current: number, pageSize: number) => {
    pageInfo.current = current
    pageInfo.pageSize = pageSize
    await getAtlasList()
  }
  const formatTotalPageText = (total: number) => `共 ${total} 个`

  return {
    getAtlasList,
    getAtlasLoading,
    queryFormBind,
    queryFormItems,
    atlasListState,
    pageInfo,
    pageChange,
    pageSizeChange,
    formatTotalPageText,
  }
}
export default useSearchAtlas
